<template>
  <div class="layout">
    <nav class="top-nav" :style="{ backgroundColor }">
      <div class="top-nav__left">
        <div class="nav-top__left--container">
          <a href="javascript:;" class="nav-top__left--arrow" @click="back">
            <ArrowLeft />
          </a>
        </div>
      </div>
      <div class="top-nav__center">{{title}}</div>
      <div class="top-nav__right">
        <slot name="right"></slot>
      </div>
    </nav>
    <slot></slot>
  </div>
</template>
<script>
import ArrowLeft from "./ArrowLeft";

export default {
  components: { ArrowLeft },
  props: {
    title: String,
    enableHistoryBack: {
      type: Boolean,
      default: false
    },
    backgroundColor: {
      type: String,
      default: "#fff"
    }
  },
  methods: {
    back() {
      if (this.enableHistoryBack) {
        this.$router.go(-1);
      } else {
        this.$router.push("/");
      }
    }
  }
};
</script>
<style lang="stylus">
.layout {
  min-height: 100vh;
  background: rgba(242, 245, 250, 1);
}

.top-nav {
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: stretch;

  .top-nav__left, .top-nav__right {
    width: 700px;
    height: 100%;
  }

  .top-nav__center {
    flex: 1;
    text-align: center;
    font-size: 100px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav-top__left--container {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    a {
      font-size: 0px;
      display: block;
      width: 100px;
      height: 100px;
      line-height: 100px;
      margin-left: 47px;
      text-align: center;

      .arrow-left {
        vertical-align: middle;
        display: inline-block;
      }
    }
  }
}
</style>